<template>
    <base-page>
        <base-header title="核对结果"></base-header>
        <base-page-content class="px40 white-bg">
            <div class="column center">
                <div class="f24 my16">{{pinyin}}</div>
                <div class="square ba ca mb20 word f120 center">{{word}}</div>
                <div class="square ba word f120 center">
                    <img :src="dataURL" class="full">
                </div>
            </div>

            <div class="bottom mb50 mt20 row between">
                <md-button size="small" type="primary" inline plain style="width: 40%" @click="correct">正确({{weight/29}})
                </md-button>
                <md-button size="small" type="warning" inline plain style="width: 20%" @click="error">错误</md-button>
            </div>
        </base-page-content>
    </base-page>
</template>

<script>
    import { getWeight, setWeightIncrease, setWeightReduction } from '@/utils/word';
    export default {
        name: "result",
        props: {
            onSuccess: Function,
            word: String,
            pinyin: String,
            dataURL: String
        },
        data() {
            return {
                weight: getWeight(this.word)
            };
        },
        methods: {
            correct() {
                const {word, weight} = this;
                setWeightIncrease(word, weight);
                this.onSuccess();
                this.$router.back();
            },
            error() {
                const {word, weight} = this;
                setWeightReduction(word, weight);
                this.$router.back();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .word {
        width: 180px;
    }
</style>